<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model指令进行表单数据的双向绑定</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--
    功能:
        验证v-model指令使vue对象中的data中的属性和input的值进行双向关联.
    说明:
        1. 之所以说是双向关联, 意思是:
            - 页面加载时, vue对象中的data中的message属性会替换到对应的input标签上;
            - 而input标签值的改变会同步到vue对象中的data中的message属性.
    -->
    <input type="text" v-model="message" />
    {{message}}
    <br />

    <textarea v-model="textareaValue" placeholder="add multiple lines"></textarea>
    {{ textareaValue }}
    <br />

    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <br />

    <!--
    功能:
        多个checkbox绑定到同一个数组
    -->
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>

    <!--
    功能:
        使用v-model绑定select
    -->
    <select v-model="selected">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>
    <span>Selected: {{ selected }}</span>

    <!--
    功能:
        绑定多选框.
    说明:
        1. 感觉用处不多.
    -->
    <select v-model="selected2" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    <span>Selected: {{ selected2 }}</span>

    <div style="height: 50px"></div>

    <!--
    功能:
        使用v-for展示选项.
    -->
    <select v-model="selected3">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected3 }}</span>

    <div style="height: 50px"></div>
    <!--
    功能:
        trim修饰符会将输入的内容自动去除左右两边的空格.
    -->
    <input type="text" v-model.trim="trimValue" />
    <label>{{ trimValue }}</label>

    <div style="height: 50px"></div>
    <!--
    功能:
        .number修饰符会将输入的结果自动转换为数字.
    -->
    <input type="number" v-model.number="numberVal" />
    <label>{{ numberVal }}</label>


</div>
</body>
<script>

    let app1 = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            radioValue: '',
            textareaValue: '',
            checked: true,
            checkedNames: [],
            selected: 'a',
            selected2: [],
            selected3: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ],
            trimValue: '',
            numberVal: ''
        }
    });

</script>
</html>